<script lang="ts">
import { defineComponent, ref, watch, onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import SearchInput from '../components/SearchInput.vue'
import { getRecommendSearch } from '../api/search'
import type { parse } from 'vue/compiler-sfc'
export default defineComponent({
  components: {
    SearchInput
  },
  setup() {
    let router = useRouter()
    let route = useRoute()
    onMounted(() => { })
    const value = ref('')
    let getItem: any =ref( window.localStorage.getItem("historylist")) 
    let historylist: any =ref(JSON.parse(getItem.value) || [])
    let historylists:any =ref(new Set(historylist.value))

    // 回车事件
    const onSearch: any = (val: any) => {
      if (val !== "") {
        console.log(val);
        historylist.value.push(val);
        window.localStorage.setItem("historylist", JSON.stringify(historylist.value));
        console.log(historylists.value);
        router.push({
          path: '/searchdetails',
          query: {
            value: val
          }
        })
      }

    }


    // 清除搜索记录数据
    let clearnlist: any = () => {
      console.log(111);
      window.localStorage.removeItem("historylist")
      historylist.value=[]
    }
    // 取消事件
    const onCancel: any = () => {
      console.log(route.query.flag);
      
      if (Number(route.query.flag)==1) {
        router.push({
          path: "/home",
          query: {
            active: Number(route.query.active)
          }
      })
      }else{
        router.push({
        path: '/search',
      })
      }
      

      
    }
    let RcmdSearch: any = ref(null)
    //获取热门搜索
    const getRecommendSearchFun = () => {
      getRecommendSearch().then((data: any) => {
        console.log('热门搜索内容=>', data)
        RcmdSearch.value = data.data
        console.log('热门搜索内容=>', RcmdSearch.value)
      })
    }
    // 点击之后修改input标签内部内容
    let addvalue: any = (name: any) => {
      console.log(name);
      value.value = name;
      historylist.value.push(name);
      window.localStorage.setItem("historylist", JSON.stringify(historylist.value));
      router.push({
        path: '/searchdetails',
        query: {
          value: name
        }
      })
    }

    // 历史记录

    onMounted(() => {
      getRecommendSearchFun() //获取热门搜索
    })
    return {
      value,
      onSearch,
      onCancel,
      RcmdSearch,
      addvalue,
      historylist,
      clearnlist,
      historylists
    }
  }
})
</script>



<template>
  <div class="searchpage">
    <!-- 搜索框开始 -->
    <!-- <div class="search-input-box">
      <div class="iconfont icon-sousuo1"></div>
      <input
        type="search"
        placeholder="搜索作品、创作人、正版素材"
        class="search-input iconfont icon-sousuo1"
        autofocus
      />
      <div class="search-cancel" @click="$router.back()">取消</div>
    </div> -->
    <!-- <search-input></search-input> -->
    <div>
      <form action="/">
        <van-search v-model="value" show-action placeholder="搜索作品、创作人、正版素材" @search="onSearch" @cancel="onCancel" />
      </form>
    </div>
    <!-- 分割线 -->
    <!-- <div class="division"></div> -->

    <!-- 热门推荐 -->
    <div class="cearch-recommend">
      <!-- 搜索历史 -->
      <div class="search-history" v-if="historylist.length">
        <div class="search-history-title">
          <div>历史搜索</div>
          <div class="iconfont icon-del" @click="clearnlist"></div>
        </div>
        <ul class="history-main">
          <li @click="addvalue(item)" v-for="(item, index) in historylists" :key="index">{{ item }}</li>
        </ul>
      </div>

      <!-- 热门内容 -->
      <div class="top-content">
        <div class="top-content-title">热门内容</div>
        <ul class="top-content-main">
          <li @click="addvalue('人民日报2023高考励志宣传片')">
            <span>1</span>人民日报2023高考励志宣传片
            <div class="top-content-main-new"><span class="top-new">新</span></div>
          </li>
          <li @click="addvalue('五芳斋废土风广告《锥宇宙2》')"><span>2</span>五芳斋废土风广告《锥宇宙2》
            <div class="top-content-main-new"><span class="top-new">新</span></div>
          </li>
          <li @click="addvalue('我们想在app精品上看到什么')"><span>3</span>我们想在app精品上看到什么
            <div class="top-content-main-new"><span class="top-new">新</span></div>
          </li>
          <li @click="addvalue('影视干货教程系统虚学')"><span style="color: #d3c6c6;">4</span>影视干货教程系统虚学
            <div class="top-content-main-new" style="background: lightgreen;"><span class="top-new">课程</span></div>
          </li>
          <li @click="addvalue('经验分享嘉年华干货作品征集')"><span style="color: #d3c6c6;">5</span>经验分享嘉年华干货作品征集
            <div class="top-content-main-new"><span class="top-new">新</span></div>
          </li>
          <li @click="addvalue('暑假党封神第一部')"><span style="color: #d3c6c6;">6</span>暑假党封神第一部
            <div class="top-content-main-new" style="background-color: rgb(231, 166, 46);"><span class="top-new">活动</span>
            </div>
          </li>
        </ul>
      </div>
      <!-- 热门搜索 -->
      <div class="hot-search">
        <div class="hot-search-title">热门搜索</div>
        <!-- 主要内容 -->
        <div class="hot-search-main" v-if="RcmdSearch">
          <div class="hot-search-main-item" v-for="(item, index) in RcmdSearch.list" @click="addvalue(item.name)">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.searchpage {

  //   padding-top: 16px;
  .search-input-box {
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    margin: 10px 20px;
    margin-top: 15px;

    // box-shadow: 0px 2px 5px 0px #ccc;
    // background: aqua;
    .search-input {
      padding: 7px 0 7px 35px;
      height: 30px;
      line-height: 16px;
      box-sizing: border-box;
      font-size: 14px;
      background: #ffffff;
      border-radius: 5px;
      border: 0px;
      background: #f1f1f1;
      color: #b5b3b3;
      width: 86%;
    }

    &>div:nth-child(1) {
      width: 10%;
      padding: 0 0 0 12px;
      position: absolute;
      font-size: 16px;
      height: 30px;
      line-height: 30px;
    }

    .search-cancel {
      // width: 10%;
      // padding: 0 0 0 16px;
      font-size: 16px;
      height: 30px;
      line-height: 30px;
    }
  }

  .division {
    width: 100%;
    height: 2px;
    background: #f7f7f7;
    // margin-bottom: ;
  }

  .cearch-recommend {
    padding: 20px 16px;

    .search-history {
      .search-history-title {
        font-size: 14px;
        color: #8b8b8b;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
      }

      .history-main {
        display: flex;
        flex-wrap: wrap;
        padding-right: 20px;

        li {
          margin: 6px 6px 20px 6px;
          font-size: 12px;
          padding: 5px 12px;
          background: #f7f7f7;
          border-radius: 4px;
        }
      }
    }

    .top-content {
      .top-content-title {
        font-size: 14px;
        color: #8b8b8b;
      }

      .top-content-main {
        li {
          margin: 20px 0;
          font-size: 14px;
          color: #363636;

          &>span:nth-child(1) {
            margin-right: 13px;
          }

          .top-content-main-new {
            display: inline-block;
            // width: 15px;
            padding: 2px;
            height: 15px;
            font-size: 8px;
            background: #ff2862;
            color: #fff;
            line-height: 15px;
            text-align: center;
            margin-left: 8px;
            border-radius: 2px;
            padding-top: 1px;
            box-sizing: border-box;

            .top-new {
              display: inline-block;
              text-align: center;
              transform: scale(0.9);
            }
          }
        }
      }
    }

    .hot-search {
      .hot-search-title {
        font-size: 14px;
        color: #8b8b8b;
        margin-bottom: 12px;
      }

      .hot-search-main {
        display: flex;
        flex-wrap: wrap;
        padding-right: 20px;

        .hot-search-main-item {
          margin: 6px;
          font-size: 12px;
          padding: 8px 12px;
          background: #f7f7f7;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>